<template>
  <div class="detail">
    <!-- 头部 -->
    <div class="d-top">
      <icon
        name="arrow-left"
        @click="onClickLeft"
      />
      <img
        :src="
          product.uavatar
            ? product.uavatar
            : 'https://img1.baidu.com/it/u=789445466,168387505&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        "
        alt=""
        style="
          width: 12vw;
          height: 12vw;
          display: inline-block;
          border-radius: 12vw;
        "
      />
      <span>{{ product.unickname }}</span>
      <p class="d-p1">
        <i class="fa fa-plus"></i>
        <span>关注</span>
      </p>
      <p>
        <cell @click="showShare = true" />
        <icon name="ellipsis" />
        <share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </p>
    </div>
    <!-- 图片 -->
    <div class="m-img">
      <img
        :src="product.img"
        alt=""
      />
    </div>
    <div
      class="content"
      v-html="product.content"
    ></div>
    <!-- 分享 -->
    <div class="talk">
      <p>
        <icon name="share-o" />
      </p>
      <p>
        <icon
          name="star-o"
          @click="addData"
        />
        <span>7</span>
        <icon name="chat-o" />
        <span>20</span>
        <icon
          name="good-job-o"
          @click="postlike(product.id)"
        />
        <span>{{ product.postLike }}</span>
      </p>
    </div>
    <h2 style="font-weight: 400; text-align: left; margin: 10px">全部评论</h2>
    <!-- 评论 -->
    
    <router-view></router-view>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { stringify } from "qs";
import { Icon, ShareSheet, Toast, Cell, Button } from "vant";
import { loadDetailAPI,  postLikeAPI } from "../services/auth";
import { loadUserInfoAPI, fetchProductAPI } from "../services/shop";
import { dalImg } from "../utils/tools";
const product = ref({}); // 数据
const route = useRoute(); // 获取路由中的参数
const router = useRouter();
const content = ref("");
const loadData = async () => {
  const data = await loadDetailAPI(route.query.id);
  console.log(data);
  product.value = data.data;
};
//分享板块
const showShare = ref(false);
const options = [
  [
    { name: "微信", icon: "wechat" },
    { name: "朋友圈", icon: "wechat-moments" },
    { name: "微博", icon: "weibo" },
    { name: "QQ", icon: "qq" },
  ],
  [
    { name: "复制链接", icon: "link" },
    { name: "分享海报", icon: "poster" },
    { name: "二维码", icon: "qrcode" },
    { name: "小程序码", icon: "weapp-qrcode" },
  ],
];
const onSelect = (option) => {
  Toast(option.name);
  showShare.value = false;
};
//获取用户头像
const userInfo = ref({});
loadUserInfoAPI().then((res) => {
  userInfo.value = res.data;
});
const onClickLeft = () => {
  router.go(-1); // -1表示返回上一个
};

//点赞
const postlike = async (pId) => {
  const res = await postLikeAPI(stringify({ pId }));
  console.log(res);
  if (res.code === 200) {
    Toast.success(res.msg);
    loadData();
  } else {
    Toast.success(res.msg);
    loadData();
  }
};
// //收藏
// const addData = async () => {
//   const res = await fetchProductAPI(route.query.id);
//   console.log(res);
//   if (res.code == 200) {
//     Toast.success(res.msg);
//   } else {
//     Toast.success(res.msg);
//   }
// product.value = data.data;
// };
// const shoucang = async () => {
//   const res = await shouCangAPI(route.query.id);
//   console.log(res);
// };
loadData();
</script>
<style scoped>
.d-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}

.d-p1 {
  width: 60px;
  height: 30px;
  border: 1px solid #cecece;
  border-radius: 20px 20px;
  line-height: 30px;
  text-align: center;
}
.van-cell {
  margin-top: -1rem;
}
.van-badge__wrapper {
  font-size: 30px;
}
.content {
  font-size: 18px;
  margin-top: 1rem;
  padding: 1rem;
  height: 150px;
}
.talk {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 15px;
}
.talk p {
  width: 50%;
}
.talk p:nth-child(2) {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.talk p span {
  color: gray;
}

</style>
